<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Agregar</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		{% load staticfiles %} <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
		{% load staticfiles %} <link rel="stylesheet" href="{% static "css/responsive.css" %}">
		{% load staticfiles %} <link rel="stylesheet" href="{% static "css/misestilos.css" %}">
		{% load staticfiles %} <link rel="stylesheet" href="{% static "css/datepicker.css" %}">
		
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
	</head>

	<body>

		{% include "topmenu.html" %} <!-- Top menu -->
		<div class="container">

			{% if exito %}
            	<div class="alert alert-success">
                  <button type="button" class="close" data-dismiss="alert">&times;</button>
                  <strong>Guardado</strong> Los datos se guardaron correctamente
                </div>
	        {% endif %}

			<div class="row-fluid">
				
				{% include "sidebar.html" %} <!-- Side bar -->
				
				<!-- Formulario de Buenas Practicas -->
				<div class="span9">
					<div class="page-header">
						<h1>Formulario de Buenas Prácticas</h1>
					</div>
					
					<form action="/plataforma/buenaspracticas/agregar/" method="post" name="nuevoformulario" class="form-vertical"> {% csrf_token %}
						<div class="form-horizontall well">
							<div class="control-group">
								<label for="dimension" class="control-label"><b>Dimensión:</b></label>
								<div class="controls">
									<select name="dimension" id="dimension" required style="width:255px" onchange="get_indicadores();">
										<option value="" disabled="disabled" selected="selected">| Elije la Dimensión |</option>
										<option value="1">Formacion continua</option>
										<option value="2">Transferencia de conocimiento</option>
										<option value="3">Compromiso social</option>
									</select>
								</div>
							</div>
							<hr>
							<div class="control-group">
								<table width="100%" cellpadding="10px" cellspacing="3px" >
									<tr>
										<th align="center">Fecha inicio:</th>
										<th align="center">Fecha fin: (opcional)</th>
									</tr>
									<tr>
										<th align="center"><input name="fecha_desde" id="fecha_desde" type="text" class="datePicker" data-date-format="dd/mm/yyyy" placeholder="dd/mm/aaaa" required></input></th>
										<th align="center"><input name="fecha_hasta" id="fecha_hasta" type="text" class="datePicker" data-date-format="dd/mm/yyyy" placeholder="dd/mm/aaaa"></input></th>
									</tr>
								</table>
							</div>
							<hr>
							<div class="control-group">
								<label for="iniciativa" class="control-label"><b>Nombre de la Iniciativa:</b></label>
								<div class="controls">
									<textarea name="iniciativa" id="iniciativa" class="textarea.span5" cols="200" rows="2" placeholder="Ingrese el texto aquí" required></textarea>
								</div>
							</div>
							<div class="control-group">
								<label for="objetivo" class="control-label"><b>Descripción y Objetivo:</b></label>
								<div class="controls">
									<textarea name="objetivo" id="objetivo" class="textarea.span5" cols="200" rows="3" placeholder="Ingrese el texto aquí" required></textarea>
								</div>
							</div>
							<div class="control-group">
								<label for="desarrollo" class="control-label"><b>Creación y Desarrollo:</b></label>
								<div class="controls">
									<textarea name="desarrollo" id="desarrollo" class="textarea.span5" cols="200" rows="5" placeholder="Ingrese el texto aquí" required></textarea>
								</div>
							</div>
							<hr>
							<div class="control-group">
								<label for="gobernanza" class="control-label"><b>Gobernanza y Dependencia Institucional:</b></label>
								<div class="controls">
									<select name="gtipo1" id="gtipo1" required style="width:155px">
										<option value="" disabled="disabled" selected="selected">| Elije la Fuente |</option>
										<option value="1">Ente Público</option>
										<option value="2">Ente Privado</option>
									</select>
									<input type="text" name="gdescriptcion1" id="gdescriptcion1" placeholder="ingrese una descipción" class="span9" style="margin-left:10px"  required></input>
								</div>
								<div>
							        <input type="button" class="btn btn-default" id="btnAddg" value="Agregar" onclick="addg()" />
							        <input type="button" class="btn btn-default" id="btnDelg" value="Remover" onclick="delg()" />
							    </div>
							</div>
							<hr>
							<div class="control-group">
								<label for="fases" class="control-label"><b>Procesos o Fases que se siguen para gestionar adecuadamente esta actividad:</b></label>
								<div class="controls">
									<textarea name="fases" id="fases" class="textarea.span5" cols="200" rows="7" placeholder="Ingrese el texto aquí" required></textarea>
								</div>
							</div>
							<hr>
							<div class="control-group">
								<label for="participantes" class="control-label"><b>Participantes Involucrados:</b></label>
								<div class="controls">
									<input type="number" name="cantidad1" id="cantidad1" placeholder="Cantidad" class="span2" required></input>
									
									<input type="text" name="grado1" id="grado1" placeholder="Tipo/Grado Academico" class="span10" style="margin-left:10px" required></input>
								</div>
								<div>
							        <input type="button" class="btn btn-default" id="btnAddp" value="Agregar" onclick="addp()" />
							        <input type="button" class="btn btn-default" id="btnDelp" value="Remover" onclick="delp()" />
							    </div>
							</div>
							<hr>
							<div class="control-group">
								<label for="financiacion" class="control-label"><b>Finaniación (Relación Coste-Beneficio):</b></label>
								<div class="controls">
									<select name="ftipo1" id="ftipo1" required style="width:155px">
										<option value="" disabled="disabled" selected="selected">| Elije la Fuente |</option>
										<option value="1">Ente Público</option>
										<option value="2">Ente Privado</option>
									</select>
									<input type="text" name="fdescriptcion1" id="fdescriptcion1" placeholder="ingrese una descipción" class="span9" style="margin-left:10px"  required></input>
								</div>
								<div>
							        <input type="button" class="btn btn-default" id="btnAddf" value="Agregar" onclick="addf()" />
							        <input type="button" class="btn btn-default" id="btnDelf" value="Remover" onclick="delf()" />
							    </div>
							</div>
							<hr>
							<div class="control-group">
								<label for="factores" class="control-label"><b>Factores de Éxito:<b></label>
								<div class="controls">
									<textarea name="factores" id="factores" class="textarea.span5" cols="200" rows="3" placeholder="Ingrese el texto aquí" required></textarea>
								</div>
							</div>
							<hr>
							<div class="control-group">
								<label for="valoracion" class="control-label"><b>Valoración sobre su impacto en la Universidad:</b></label>
								<div class="controls">
									<textarea name="valoracion" id="valoracion" class="textarea.span5" cols="200" rows="3" placeholder="Ingrese el texto aquí" required></textarea>
								</div>
							</div>
							<hr>
							<div class="control-group">
								<label for="indicadores" class="control-label"><b>Resultados / Indicadores Disponibles:</b></label>	
								<div class="contols" id="ind">
									
								</div>						
							</div>
							<div class="form-actions" align="center">
								<button type="submit" class="btn btn-primary">Guardar</button>
							</div> <!-- Botones de opciones -->
						</div>
					</form>
				</div><!-- Fin span9-->
			</div>
			<!-- Fin row -->
			{% include "footer.html" %} <!-- Footer -->
		</div>
		<!-- /container -->
		<!-- JS files -->
		{% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery-1.10.2.min.js" %}"></script>
		{% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
		{% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap-datepicker.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>
		
		<script>
			$(function() {
			$(".datePicker").datepicker();
			});
		</script>
		
		{% load staticfiles %} <script type="text/javascript" src="{% static "js/botones.js" %}"></script>
		
		<script type="text/javascript">
			function get_indicadores(){
				$.ajax({ 
					type : "POST", 
					url : '/plataforma/buenaspracticas/agregar/ajax_ind/', 
					data : { 'csrfmiddlewaretoken' : document.getElementsByName('csrfmiddlewaretoken')[0].value, 
							'dimension' : $('#dimension').val(), }, 
					success : function(respuesta) { 
								$('#ind').html(respuesta)
							 } 
					}
				);
			};
		</script>
	
		<!-- {% load staticfiles %} <script type="text/javascript" src="{% static "js/parsley.js" %}"></script> -->
	</body>
</html>
